// Default
* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: var(--bg-color);
  color: var(--body-color);
  transition: color 0.6s, background-color 0.6s;
  font-family: var(--base-font-family);
  margin: 0;
  padding: 0;
  line-height: 1.5;


  overflow: overlay;

  ::selection {
    background-color: var(--selection-color);
  }
}

a:not(.button) {
  color: var(--link-color);
  transition: opacity 0.2s;
  &:hover {
    opacity: 0.8;
  }
}

img {
  max-width: 100%;
}

table {
  display: block;
  width: 100%;
  overflow: auto;
  margin-bottom: 1.25em;

  tr {
    border-top: 1px solid #c6cbd1;
  }

  td,
  th {
    padding: 6px 13px;
    border: 1px solid #dfe2e5;
  }

  th {
    font-weight: 600;
    background-color: var(--bg-code);
  }
}

sup {
  position: relative;
  top: -0.3em;
  vertical-align: top;
  color: var(--link-color);
  margin: 0 0.2em;

  &::before {
    content: '[';
  }

  &::after {
    content: ']';
  }
}

hr {
  text-align: center;
  border: none;
  margin: calc(var(--space) / 2) 0;
}

hr:before {
  content: '...';
  letter-spacing: 0.6em;
  font-size: 1.2em;
}

::-webkit-scrollbar {
  width: .49rem!important;
  height: .36rem!important;
  background: 0 0!important;
}
::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.3)!important;
}